<template>
  <el-affix>
  <nav class="globalnav">
    <div class="menu">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color=rgba(0,0,0,0)
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        @select="handleSelect"
      >
        <el-menu-item index="/">Life</el-menu-item>
        <el-menu-item index="/learn">Learn</el-menu-item>
        <el-menu-item index="/About">About</el-menu-item>
      </el-menu>
    </div>
  </nav>
</el-affix>
</template>
  
<script lang="ts">
  import { defineComponent } from 'vue'
  
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  export default defineComponent({
    name: 'head-view',
    
    setup() {
        return {
            handleSelect
        }
    }
  })
</script>

<style>
.menu {
  margin: 0 auto;
  max-width: 980px;
  padding: 0,22px;
  position: relative;
  padding-left: max(22px,env(safe-area-inset-left));
  padding-right: max(22px,env(safe-area-inset-right));
}
.globalnav {
  background: rgba(0,0,0,0.8);
}

</style>